<template>
	<div class="body Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i><span>{{inventoryInfo.loc}}库位订单详情</span> 
		</header>
		<div class="form-content" style="overflow:scroll;margin-top: 60px">
			<div v-for="(item, index) in orderList" :key="index">
				<div class="order-box">
					<div class="order-item">
						<div style="width: 55%"><span>母单号:&nbsp; </span> {{ item.omsNo }}</div>						
						<div><span>母单件数:&nbsp; </span>{{ item.orderQty }}</div>
					</div>
					<div class="order-item">
						<div style="width: 55%"><span>收货人:&nbsp; </span> {{ item.receivePartyName }}</div>						
						<div><span>收货电话:&nbsp; </span>{{ item.receivePartyPhone }}</div>
					</div>
					<div class="order-item">
						<div style="width: 55%"><span>在库件数:&nbsp; </span> {{ item.locQty }}</div>		
						<div>
							<span>获取到齐标志:&nbsp; </span>
							<span v-if="item.stockCompletionFlag == 'Z-KX'" style="color:red">空闲</span>
							<span v-if="item.stockCompletionFlag == 'N-WDQ'" style="color:red">未到齐</span>
							<span v-if="item.stockCompletionFlag == 'H-BFDQ'" style="color:red">部分到齐</span>
							<span v-if="item.stockCompletionFlag == 'A-YDQ'" style="color:red">已到齐</span>
						</div>		 
					</div>
					<div class="order-item">
						<div style="width: 55%"><span>收货地址:&nbsp; </span>{{ item.receivePartyAddr1 }}</div>
					</div>
					<div class="footer-btn-1" @click="inventoryConfirmEnter(item)">出库</div>
				</div>
			</div>
		</div>
		<!-- 页面数据为空时 -->
		<div v-if="is_NoData" class="NoData">
			<div>
				<i class="iconfont icon-meiyouwuliuxinxi"></i>
				<div>暂无数据</div>
			</div>
		</div>
		<div class="footer-btn" @click="confirmEnter" v-if="orderList.length">一键出库</div>
	</div>
</template>
<script>
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery" 
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'ReportAbnormal',
		components: {
      'v-header': Header,
      'pictureSample': pictureSample
		},
		data() {
			return {
				orderList: [],
				inventoryInfo: {},
				loc: '',
				is_NoData: false
			}
		},
		watch: { 
		},
		mounted() {
		},
		created() {
			this.inventoryInfo = this.$route.params.inventoryInfo
			this.orderList = this.$route.params.inventoryInfo.orderList
			this.loc = this.$store.state.lnventoryCurrentLoc
		},
		methods: {
			goPrev() {
				this.$router.push({
					name: "InventoryList",
					params: {
						loc: this.loc
					}
				})
			},
			// 一键出库
			confirmEnter() {
				let that = this; 
				let params = {
					"idArray":[this.inventoryInfo.id],
					"omsNo": ''
				}
				this.httpRequest1('post', '/system/wms/yiChuLocApp', params).then(res => {
					if(res.success) {
						that.$message({
							message: res.message,
							type: 'success'
						});
						setTimeout(function () { 
                            that.goPrev()
                        }, 1500)
					}
				})
			},
			// 出库
			inventoryConfirmEnter (obj) {
				let that = this; 
				let params = {
					"idArray":[this.inventoryInfo.id],
					"omsNo": obj.omsNo
				}
				this.httpRequest1('post', '/system/wms/yiChuLocApp', params).then(res => {
						if(res.success) {
							that.$message({
								message: res.message,
								type: 'success'
							});
							that.queryOrder()
						} 
					})
			},
			queryOrder () {
				let that = this; 
				const params = {
					currentPage: 1,
					loc: this.loc
				}
				this.httpRequest1('post', '/system/wms/queryLocOrder', params).then((res) => {
					that.orderList = res.data.list[0].orderList || [];
					if (that.orderList.length) {
						that.is_NoData = false; // 没有数据模块 是否显示
					} else {
						that.is_NoData = true;
					}
				})
			}
    	},
  		beforeDestroy () {
  		}
  }
</script>
<style scoped lang="less">
	@import "../../components/publicLess.less";
	.Abnormal {
		font-size: 28/50rem;
	}
	.order-box {
		margin: 5px;
		border: 1px solid #e1e1e1;
		padding: 5px 10px;
		line-height: 23px;
		.orderNo {
			border-bottom: 1px solid #e1e1e1;
		}
		.order-item {
			display: flex;
		}
		span {
			color: #6e6b6bbd;
		}
	}
	.btn {
		display: flex;
		justify-content: right;
		margin-top: 6px;
		.edit {
			width: 20%;
			background-color: #038EEA;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
	}
	.footer-btn {
		position: fixed;
		bottom: 20px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 5px;
		width: 50%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 25%;
	}
	.footer-btn-1 {
		height: 28px;
		line-height: 28px;
		text-align: center;
		border-radius: 5px;
		width: 30%;
		background-color: #038EEA;
		color: #fff;
		margin-top: 10px; 
		margin-left: 65%;
	}
	
.address {
  margin-top: 10px;
  display: flex;
  img {
    width: 80/50rem;
		padding: 12/50rem;
		box-sizing: border-box;
		height: 80/50rem;
		line-height: 80/50rem;
  }
  .ok-btn {
    width: 76/50rem;
    height: 76/50rem;
    font-size: 28/50rem;
    line-height: 80/50rem;
    margin: 0 10/50rem;
    text-align: center;
    background-color: #038EEA;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
}
.currentAddress {
  font-size: 28/50rem;
  padding: 20/50rem;
  color: #9b9b9b;
}
/deep/ .el-select-dropdown.el-popper {
  left: 0 !important;
  z-index: 9999;
}
.el-select-dropdown .el-select-dropdown__item {
  white-space: normal;
  line-height: 20px !important;
  height: inherit;
  border-bottom: 1px solid #e1e1e1;
  padding-top: 5px;
  padding-bottom: 5px;
}
.clockIn {
	height: 80px;
	width: 80px;
	background-color: #038EEA;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 50%;
	line-height: 80px;
	text-align: center;
	color: #fff;
	font-size: 20px;
}
.form-content .mint-loadmore {
	height: 100%;
}
</style>